React Router v6: Zamonaviy veb-ilovalar uchun navigatsiya naqshlarini o'zlashtirish

React Router v6 — bu React ilovalari uchun kuchli va moslashuvchan marshrutlash kutubxonasi. U to'liq sahifani qayta yuklamasdan navigatsiyani boshqarish orqali uzluksiz foydalanuvchi tajribasiga ega bo'lgan yagona sahifali ilovalarni (SPA) yaratishga imkon beradi. Ushbu blog posti React Router v6 yordamida muhim navigatsiya naqshlarini chuqur o'rganib chiqadi va sizga mustahkam hamda foydalanuvchiga qulay veb-ilovalar yaratish uchun bilim va misollar taqdim etadi.

React Router v6 Asosiy Konsepsiyalarini Tushunish

Muayyan naqshlarga sho'ng'ishdan oldin, keling, ba'zi fundamental tushunchalarni ko'rib chiqaylik:

• Deklarativ marshrutlash: React Router deklarativ yondashuvdan foydalanadi, bunda siz o'z marshrutlaringizni React komponentlari sifatida belgilaysiz. Bu sizning marshrutlash mantig'ingizni tushunarli va saqlashga oson qiladi.
• Komponentlar: Asosiy komponentlar qatoriga BrowserRouter, HashRouter, MemoryRouter, Routes, va Route kiradi.
• Hooklar: React Router marshrutlash ma'lumotlariga kirish va navigatsiyani boshqarish uchun useNavigate, useLocation, useParams, va useRoutes kabi hooklarni taqdim etadi.

1. <Routes> va <Route> bilan Deklarativ marshrutlash

React Router v6 ning asosi deklarativ marshrutlashda yotadi. Siz o'z marshrutlaringizni <Routes> va <Route> komponentlari yordamida belgilaysiz. <Routes> komponenti marshrutlaringiz uchun konteyner vazifasini bajaradi, <Route> komponenti esa ma'lum bir marshrutni va ushbu marshrut joriy URL ga mos kelganda render qilinadigan komponentni belgilaydi.

Misol: Asosiy Marshrut Konfiguratsiyasi

Quyida oddiy ilova uchun marshrutlarni sozlashning asosiy misoli keltirilgan:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

export default App;

Ushbu misolda biz uchta marshrutni belgiladik:

• /: Home komponentini render qiladi.
• /about: About komponentini render qiladi.
• /contact: Contact komponentini render qiladi.

BrowserRouter komponenti brauzer tarixiga asoslangan marshrutlashni yoqadi. React Router joriy URLni belgilangan marshrutlarga solishtiradi va mos keladigan komponentni render qiladi.

2. URL Parametrlari bilan Dinamik Marshrutlar

Dinamik marshrutlar sizga URL'dagi turli qiymatlarni qayta ishlay oladigan marshrutlar yaratishga imkon beradi. Bu mahsulot ID'si yoki foydalanuvchi ID'si kabi noyob identifikatorga asoslangan kontentni ko'rsatish uchun foydalidir. React Router v6 URL parametrlarini belgilash uchun : belgisidan foydalanadi.

Misol: Mahsulot Tafsilotlarini Ko'rsatish

Aytaylik, sizda elektron tijorat ilovasi bor va har bir mahsulot tafsilotlarini uning ID'siga qarab ko'rsatmoqchisiz. Siz shunday dinamik marshrutni belgilashingiz mumkin:

import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

function ProductDetails() {
  const { productId } = useParams();

  // Fetch product details based on productId
  // ...

  return (
    

      
Product Details
      
Product ID: {productId}
      {/* Display product details here */}
    
  );
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

Ushbu misolda:

• /products/:productId dinamik marshrutni belgilaydi, bu yerda :productId URL parametrdir.
• useParams hooki ProductDetails komponenti ichida productId parametrining qiymatiga kirish uchun ishlatiladi.
• So'ngra siz productId yordamida ma'lumotlar manbangizdan tegishli mahsulot tafsilotlarini olishingiz mumkin.

Xalqarolashtirish Misoli: Til Kodlarini Boshqarish

Ko'p tilli veb-sayt uchun til kodlarini boshqarish uchun dinamik marshrutdan foydalanishingiz mumkin:

} />

Ushbu marshrut /en/about, /fr/about, va /es/about kabi URL'larga mos keladi. Keyin lang parametri tegishli til resurslarini yuklash uchun ishlatilishi mumkin.

3. useNavigate bilan Dasturiy Navigatsiya

Deklarativ marshrutlash statik havolalar uchun ajoyib bo'lsa-da, ko'pincha foydalanuvchi harakatlari yoki ilova mantig'iga asoslanib dasturiy ravishda navigatsiya qilish kerak bo'ladi. React Router v6 bu maqsadda useNavigate hookini taqdim etadi. useNavigate turli marshrutlarga o'tish imkonini beruvchi funksiyani qaytaradi.

Misol: Shakl Yuborilgandan Keyin Yo'naltirish

Aytaylik, sizda shakl yuborish amali bor va shakl muvaffaqiyatli yuborilgandan so'ng foydalanuvchini muvaffaqiyat sahifasiga yo'naltirmoqchisiz:

import { useNavigate } from "react-router-dom";

function MyForm() {
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();

    // Submit the form data
    // ...

    // Redirect to the success page after successful submission
    navigate("/success");
  };

  return (
    

      {/* Form fields */}
      Submit
    
  );
}

export default MyForm;

Ushbu misolda:

• Biz navigate funksiyasini olish uchun useNavigate hookidan foydalanamiz.
• Shakl muvaffaqiyatli yuborilgandan so'ng, foydalanuvchini /success marshrutiga yo'naltirish uchun navigate("/success") ni chaqiramiz.

Navigatsiya Paytida Holatni (State) Uzatish

Shuningdek, navigate funksiyasining ikkinchi argumenti yordamida navigatsiya bilan birga holatni (state) ham uzatishingiz mumkin:

navigate("/confirmation", { state: { orderId: "12345" } });

Bu sizga ma'lumotlarni maqsad komponentga uzatish imkonini beradi, unga useLocation hooki yordamida kirish mumkin.

4. Ichki Marshrutlar va Maketlar (Layouts)

Ichki marshrutlar sizga ierarxik marshrutlash tuzilmalarini yaratishga imkon beradi, bunda bir marshrut boshqasining ichida joylashadi. Bu ko'p darajali navigatsiyaga ega murakkab ilovalarni tashkil qilish uchun foydalidir. Bu, shuningdek, ilovaning bir qismi bo'ylab muayyan UI elementlari doimiy ravishda mavjud bo'lgan maketlarni yaratishga yordam beradi.

Misol: Foydalanuvchi Profili Bo'limi

Aytaylik, sizda foydalanuvchining profil ma'lumotlari, sozlamalari va buyurtmalarini ko'rsatish uchun ichki marshrutlarga ega bo'lgan foydalanuvchi profili bo'limi mavjud:

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Profile() {
  return (
    

      
User Profile
      

        

          Profile Information
        
        

          Settings
        
        

          Orders
        
      

      
        } />
        } />
        } />
      
    
  );
}

function ProfileInformation() {
  return 
Profile Information Component
;
}

function Settings() {
  return 
Settings Component
;
}

function Orders() {
  return 
Orders Component
;
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

Ushbu misolda:

• /profile/* marshruti /profile bilan boshlanadigan har qanday URLga mos keladi.
• Profile komponenti navigatsiya menyusini va ichki marshrutlarni boshqarish uchun <Routes> komponentini render qiladi.
• Ichki marshrutlar /profile/info, /profile/settings, va /profile/orders uchun render qilinadigan komponentlarni belgilaydi.

Ota-ona marshrutidagi * belgisi juda muhim; u ota-ona marshruti har qanday ichki yo'lga mos kelishi kerakligini bildiradi, bu esa ichki marshrutlarning Profile komponenti ichida to'g'ri mos kelishiga imkon beradi.

5. "Topilmadi" (404) Xatolarini Boshqarish

Foydalanuvchi mavjud bo'lmagan marshrutga o'tgan holatlarni boshqarish muhimdir. React Router v6 buni hamma narsani qamrab oluvchi marshrut bilan osonlashtiradi.

Misol: 404 Sahifasini Amalga Oshirish

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function NotFound() {
  return (
    

      
404 - Not Found
      
The page you are looking for does not exist.
      Go back to home
    
  );
}

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

Ushbu misolda:

• <Route path="*" element={<NotFound />} /> marshruti boshqa belgilangan marshrutlarning hech biriga mos kelmaydigan har qanday URLga mos keladigan hamma narsani qamrab oluvchi marshrutdir.
• Ushbu marshrutni <Routes> komponentining oxiriga qo'yish muhim, shunda u faqat boshqa hech qanday marshrut mos kelmasa ishlaydi.

6. React Router v6 bilan Ma'lumotlarni Yuklash Strategiyalari

React Router v6 o'zidan oldingi versiya (React Router v5 `useRouteMatch` bilan) kabi o'rnatilgan ma'lumotlarni yuklash mexanizmlarini o'z ichiga olmaydi. Biroq, u turli ma'lumotlarni yuklash strategiyalarini samarali amalga oshirish uchun vositalarni taqdim etadi.

1-variant: Komponentlarda Ma'lumotlarni Olish

Eng oddiy yondashuv - bu ma'lumotlarni marshrutni render qiladigan komponentning o'zida olishdir. Siz komponent o'rnatilganda yoki URL parametrlari o'zgarganda ma'lumotlarni olish uchun useEffect hookidan foydalanishingiz mumkin.

import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function ProductDetails() {
  const { productId } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchProduct() {
      try {
        const response = await fetch(`/api/products/${productId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setProduct(data);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchProduct();
  }, [productId]);

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;
  if (!product) return 
Product not found
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

Ushbu yondashuv tushunarli, lekin agar siz bir nechta komponentda ma'lumotlarni olishingiz kerak bo'lsa, kod takrorlanishiga olib kelishi mumkin. Shuningdek, u kamroq samarali, chunki ma'lumotlarni yuklash faqat komponent o'rnatilgandan so'ng boshlanadi.

2-variant: Ma'lumotlarni Yuklash uchun Maxsus Hookdan Foydalanish

Kod takrorlanishini kamaytirish uchun siz ma'lumotlarni yuklash mantig'ini o'z ichiga olgan maxsus hook yaratishingiz mumkin. Keyin bu hookni bir nechta komponentda qayta ishlatish mumkin.

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Keyin, siz ushbu hookni o'z komponentlaringizda ishlatishingiz mumkin:

import { useParams } from "react-router-dom";
import useFetch from "./useFetch";

function ProductDetails() {
  const { productId } = useParams();
  const { data: product, loading, error } = useFetch(`/api/products/${productId}`);

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;
  if (!product) return 
Product not found
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

3-variant: Ma'lumotlarni Yuklash Imkoniyatlariga Ega Bo'lgan Marshrutlash Kutubxonasidan Foydalanish (TanStack Router, Remix)

TanStack Router va Remix kabi kutubxonalar marshrutlash bilan uzviy bog'langan o'rnatilgan ma'lumotlarni yuklash mexanizmlarini taklif qiladi. Ushbu kutubxonalar ko'pincha quyidagi xususiyatlarni taqdim etadi:

• Loader'lar: Marshrut render qilinishidan *oldin* bajariladigan funksiyalar, bu sizga ma'lumotlarni yuklash va uni komponentga uzatish imkonini beradi.
• Action'lar: Shakl yuborish va ma'lumotlar mutatsiyalarini boshqaradigan funksiyalar.

Bunday kutubxonadan foydalanish ma'lumotlarni yuklashni sezilarli darajada soddalashtirishi va, ayniqsa, murakkab ilovalar uchun unumdorlikni oshirishi mumkin.

Server Tomonida Renderlash (SSR) va Statik Sayt Generatsiyasi (SSG)

Yaxshilangan SEO va dastlabki yuklash unumdorligi uchun Next.js yoki Gatsby kabi freymvorklar bilan SSR yoki SSG dan foydalanishni o'ylab ko'ring. Bu freymvorklar sizga serverda yoki qurish vaqtida ma'lumotlarni yuklash va mijozga oldindan render qilingan HTMLni taqdim etish imkonini beradi. Bu mijozning dastlabki yuklashda ma'lumotlarni yuklash zaruratini yo'q qiladi, natijada tezroq va SEO uchun qulayroq tajriba taqdim etiladi.

7. Turli xil Router Turlari bilan Ishlash

React Router v6 turli muhitlar va foydalanish holatlariga mos keladigan turli xil router implementatsiyalarini taqdim etadi:

• BrowserRouter: Navigatsiya uchun HTML5 tarixi API'sidan (pushState, replaceState) foydalanadi. Bu brauzer muhitida ishlaydigan veb-ilovalar uchun eng keng tarqalgan tanlovdir.
• HashRouter: Navigatsiya uchun URL'ning xesh qismidan (#) foydalanadi. Bu eski brauzerlarni qo'llab-quvvatlashi kerak bo'lgan yoki HTML5 tarixi API'sini qo'llab-quvvatlamaydigan serverlarda joylashtirilgan ilovalar uchun foydalidir.
• MemoryRouter: Sizning "URL" tarixingizni xotirada saqlaydi (URL'lar massivi). React Native va testlash kabi muhitlarda foydalidir.

Ilovangizning talablari va muhitiga eng mos keladigan router turini tanlang.

Xulosa

React Router v6 React ilovalari uchun keng qamrovli va moslashuvchan marshrutlash yechimini taqdim etadi. Ushbu blog postida muhokama qilingan navigatsiya naqshlarini tushunish va qo'llash orqali siz mustahkam, foydalanuvchiga qulay va saqlashga oson veb-ilovalarni yaratishingiz mumkin. <Routes> va <Route> bilan deklarativ marshrutlashdan tortib, URL parametrlari bilan dinamik marshrutlar, useNavigate bilan dasturiy navigatsiya va samarali ma'lumotlarni yuklash strategiyalarigacha, React Router v6 sizga foydalanuvchilaringiz uchun uzluksiz navigatsiya tajribalarini yaratish imkoniyatini beradi. Yanada ko'proq nazorat va unumdorlikni optimallashtirish uchun ilg'or marshrutlash kutubxonalari va SSR/SSG freymvorklarini o'rganib chiqishni o'ylab ko'ring. Ushbu naqshlarni o'zingizning ilovangiz talablariga moslashtirishni va har doim aniq va intuitiv foydalanuvchi tajribasini birinchi o'ringa qo'yishni unutmang.